<template>
	<view class="page-box" :style="{'background': `url(${getImg(`vip-page-bg${swiperCurrent + 1}`)}) no-repeat`}">
		<headNav title="会员中心" fontWeight="bold" bgColor="transparent"></headNav>
		<view class="mar-t40 content">
			<swiper
				class="swiper-box " 
				:autoplay="false" 
				next-margin="40rpx"
				:current="swiperCurrent"
				@change="swiperChange"
			>
				<swiper-item 
					v-for="(item, index) in cardList" 
					:key="index"
					class="sw-item pos-rel h-300"
				>
					<view 
						class="swiper-item marlr8 pad40 bor-r40 h-300"
						:style="{background: bgcArr[index]}"
					>
						<view class="vip-level">
							<u--image
								:showLoading="true" 
								:src="getImg(`vip-tit-bg${index+1}`)" 
								width="232rpx"
								height="40rpx"
							></u--image>
						</view>
						<view class="vip-time mar-t20">
							2024-11-30到期 预计节省3100元
						</view>
						<view class="vip-upgrade-txt mar-t52 flex-a">
							<text class="mar-r6">您的成长值为200，还需880升级为白银会员</text>
							<u--image
								:showLoading="true" 
								:src="getImg('tips-icon2')" 
								width="25rpx"
								height="25rpx"
								@click="modalShow = true"
							></u--image>
						</view>
						<view class="slider-box mar-t22" >
							<view class="slider-nonactivated">
								<view 
									class="slider-active" 
									:style="{width: `${sliderVal}%`,background:sliderArr[index]}"
								></view>
							</view>
						</view>
					</view>
					<view class="vip-tag pos-abs">
						<u--image
							:showLoading="true" 
							:src="getImg(`vip-tag${index + 1}`)" 
							width="215rpx"
							height="190rpx"
						></u--image>
					</view>
				</swiper-item>
			</swiper>
			<view class="grid-box mar-t48">
				<view class="grid-tit pad-l24">
					普通会员可享4项特权
				</view>
				<view class="grid-list flex flex-wrap">
					<view 
						class="grid-li flex-col flex-center mar-t32" 
						v-for="(item, index) in gridList"
						:key="index"
					>
						<u--image
							:showLoading="true" 
							:src="getImg(item.icon)" 
							width="88rpx"
							height="88rpx"
							
						></u--image>
						<view class="mar-t10">
							{{ item.label }}
						</view>
					</view>
				</view>
			</view>
			<view class="block-box  mar-t32 padlr24 padtb32">
				<view class="block-tit">
					权益详情
				</view>
				<view class="mar-t24" v-for="(item, index) in 5">
					<view class="tips-label ">
						欢迎礼
					</view>
					<view class="tips-txt mar-t10">
						首次入会获赠50U币
					</view>
				</view>
				
			</view>
		</view>
		<modalTips 
			:modalShow="modalShow" 
			:showCancelButton="false" 
			:showConfirmButton="false"
			title=" "
		>
			<view class="modal-txt pad-l48 " slot="title">
				成长值规则
			</view>
			<view class=" modal-content pad-b40 mar-t32 pad-l8 pos-rel">
				<view 
					class="modal-rule" 
					v-for="(item, index) in 3" 
					:key="index"
					:class="{'mar-t20': index}"
				>
					消耗1000元获得10个U币
				</view>
				<view class="modal-close pos-abs" @click="modalShow = false">
					<u--image
						:showLoading="true" 
						:src="getImg('close-icon')" 
						width="64rpx"
						height="64rpx"
					></u--image>
				</view>
			</view>
			
		</modalTips>
	</view>
</template>
 <script>
	 import modalTips from '@/components/modalTips/modalTips.vue';
	export default {
		data() {
			return {
				cardList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',  
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',  
				],
				cellList: [],
				sliderVal: 30,
				sliderArr:[
					'#FF8AC5',
					'#979FB9',
					'#F9CE51'
				],
				bgcArr: [
					'linear-gradient( 147deg, #FFF7FD 0%, #EEC6E1 100%)',
					'linear-gradient( 147deg, #F3F5F5 0%, #D2DAEF 100%)',
					'linear-gradient( 147deg, #FFF8EA 0%, #FFE3A5 100%)'
				],
				swiperCurrent: 0,
				gridList: [
					{
						label: "欢迎礼",
						icon: "vip-grid-icon1"
					},
					{
						label: "生日礼",
						icon: "vip-grid-icon2"
					},
					{
						label: "U币回馈",
						icon: "vip-grid-icon3"
					},
					{
						label: "品牌活动",
						icon: "vip-grid-icon4"
					},
				],
				modalShow: false,
			}
		},
		onLoad() {
			
		},
		methods: {
			swiperChange(eve) {
				// console.log(eve.detail.current, "--");
				this.swiperCurrent = eve.detail.current
			},
		}
	}
 </script>

<style lang="scss" scoped>
	.slider-box {
		.slider-nonactivated {
			height: 8rpx;
			background: rgba(255,255,255,0.5);
			border-radius: 9rpx 9rpx 9rpx 9rpx;
			.slider-active {
				height: 8rpx;
				// background: #FF8AC5;
				border-radius: 9rpx 9rpx 9rpx 9rpx;
			}
		}
		
	}
	/deep/ .u-modal {
		overflow: initial !important;
	}
	/deep/ .u-popup__content {
		overflow: initial !important;
	}
	.modal-content {
		.modal-close {
			bottom: -95rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		.modal-rule {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			text-align: left;
		}
	}
	
	.modal-txt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #111111;
		text-align: left;
	}
	.block-box {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.tips-txt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.tips-label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.grid-box {
		.grid-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
		}
		.grid-list {
			.grid-li {
				width: 25%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #111111;
			}
		}
	}
	/deep/ .uni-swiper-wrapper {
		overflow: initial;
	}
	.swiper-box {
		.sw-item {
			overflow: initial;
			.vip-tag {
				top: -38rpx;
				right: 30rpx;
			}
		} 
		.swiper-item {
			.vip-level {
				font-size: 48rpx;
				font-family: DINPro, DINPro-Semibold;
				font-weight: bold;
				text-align: left;
				color: #7f0000;
			}
			.vip-time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}
			.vip-upgrade-txt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
			
		}
	}
	.page-box {
		min-height: 100vh;
		background-size: 100% 100% !important;
	}
	.cell-li {
		font-size: 32rpx;
		font-family: DINPro, DINPro-Semibold;
		font-weight: Semibold;
		text-align: left;
		color: #121924;
	}
	.head-bg {
		height: 480rpx;
		background: linear-gradient(180deg,#ffc7da, #f5f6f8);
	}
</style>
<style>
	page {
		background: #f5f6f8;
	}
</style>
